import { Table, Checkbox, Button, Drawer, Form, Tag } from '@arco-design/web-react';
import { useState } from 'react';
import { fetchButtonList } from '../../../../../../api/common' 
const formItemLayout = {
  wrapperCol: {
    span: 24,
  },
};
function Module({state, setState}){
    const [visible, setVisible] = useState(false);
    const [form] = Form.useForm();
    const [confirmLoading, setConfirmLoading] = useState(false);
    const columns = [
        {
          title: '功能',
          dataIndex: 'resName',
          key: 'resName'
        },
        {
          title: '已选模块',
          dataIndex: 'resKey',
          key: 'resKey',
          render: (col, record, index)=>{
            return( record.buttons && (record.buttons.length > 0) ? 
            record.buttons.map(btn=>{
                return <span>{btn.resName} </span>
            }) : null )
          }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            render: (col, record, index)=>{
                function selectNode(list){
                    list.map(module=>{
                        if (module.id == record.id){
                            module.status = module.status == 0 ? 1 : 0
                            return
                        }
                        if ( module.children && module.children.length > 0 ){
                            selectNode(module.children)
                        }
                    })
                }
                function changeStatus(checked){
                    let tmp = [...state.module.data]
                    if (tmp && tmp.length > 0){
                        selectNode(tmp)
                    }
                    setState(state=>{
                        return{
                            ...state,
                            module: {
                                ...state.module,
                                data: tmp
                            }
                        }
                    })
                }
              return(
                <div><Checkbox checked={record.status == 0 ? true : false} onChange={changeStatus}>{record.status == 0 ? '已开通' : '未开通'}</Checkbox><span> | </span><Button type='text' style={{padding: '0px'}} onClick={()=>{setVisible(true)}}>按钮权限</Button></div>
              )
            }
          }
    ];
    function  ButtonPermissionList(){
        return(
            <Drawer
                width={414}
                title={<span>按钮权限列表</span>}
                visible={visible}
                confirmLoading={confirmLoading}
                footer={<div>
                    <Button type='primary'>全选</Button><span style={{marginLeft: '10px'}}></span>
                    <Button type='primary'
                        onClick={()=>{
                            setVisible(false)
                        }}>
                        确定
                    </Button><span style={{marginLeft: '10px'}}></span>
                    <Button onClick={() => {setVisible(false);}}>
                        取消
                    </Button>
                </div>}
                onCancel={() => {
                setVisible(false);
                }}
            >
                <Form {...formItemLayout} form={form} layout='vertical'>
                    <Form.Item label='' field='name' rules={[]}>
                        <Checkbox.Group>
                            {state.module.buttonList.data.map((item) => {
                                return (
                                <Checkbox key={item.id} value={item.id}>
                                    {({ checked }) => {
                                    return (
                                        <Tag key={item.id} color={checked ? 'arcoblue' : ''}>
                                        {item.resName}
                                        </Tag>
                                    );
                                    }}
                                </Checkbox>
                                );
                            })}
                        </Checkbox.Group>
                    </Form.Item>
                </Form>
            </Drawer>
        )
    }

    return(
        <div style={{boxSizing: 'border-box', padding: '10px'}}>
            <Table 
                loading={state.module.loading}
                indentSize={60} 
                columns={columns} 
                data={state.module.data}
                borderCell='true'
                pagination={false}/>
            <ButtonPermissionList />
        </div>
    )
}

export default Module